// 列表页的逻辑

// 0. 获取元素
const cateBox = document.querySelector('.category > ul')
const listBox = document.querySelector('.product')
// const pageBox = document.querySelector('.pageInfo')
// const filterbox = document.querySelector('.box')
const sorts = document.querySelectorAll('.sortItem > span')
const select = document.querySelector('select')


    // 2-1. 准备一个对象, 把需要的参数都写好
    // 有默认值的就先不写
    const listInfo = {
    current: 1,
    pagesize: 12,
    search: '',
    filter: '',
    saleType: 0,
    sortType: '',
    sortMethod: '',
    category: ''
    }

    const filterArr = []

    // 2-2. 请求列表数据
    getGoodsList()
    async function getGoodsList() {
    // 2-2-1. 把对象数据类型 listInfo 转换成一个 查询字符串
    let data = ''
    for (let key in listInfo) {
    if (listInfo[key]) data += key + '=' + listInfo[key] + '&'
    }
    data = data.slice(0, -1)


    // 2-2-2. 按照接口文档请求列表数据
    const res = await pAjax({
    url: 'http://localhost:8888/goods/list',
    data,
    dataType: 'json'
    })

    // console.log(res);
    const { list, total } = res
    // 2-2-3. 渲染页面
    let str = ''
    list.forEach(item => {
    str += `
    <div class="clothes" data-id="${ item.goods_id }">
    <div class="attribute">
        <p class="sale ${ item.is_sale ? 'active' : '' }" data-id="${ item.goods_id }">SALE</p>
        <p class="hot  ${ item.is_hot ? 'active' : '' }" data-id="${ item.goods_id }">HOT</p>
    </div>
    <img src="${ item.img_big_logo }" alt="" data-id="${ item.goods_id }">
    <div class="colors">
        <img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL09.jpg" data-id="${ item.goods_id }" alt="">
        <img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL25.jpg" data-id="${ item.goods_id }" alt="">
        <img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL35.jpg" data-id="${ item.goods_id }" alt="">
        <img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL57.jpg" data-id="${ item.goods_id }" alt="">
        <img src="https://www.uniqlo.cn/hmall/test/u0000000027884/chip/22/COL69.jpg" data-id="${ item.goods_id }" alt="">
    </div>
    <p class="clothes_size" data-id="${ item.goods_id }"><span></span><span></span></p>
    <P class="clothes_name" data-id="${ item.goods_id }">${ item.title }</P>
    <p class="clothes_price" data-id="${ item.goods_id }">
        <span>￥${ item.current_price }</span>
        <span class="og_price">￥${ item.price }</span>
    </p>
    <button data-id="${ item.goods_id }">添加至购物车</button>
</div>
    `
    })
    listBox.innerHTML = str
    }

    listBox.addEventListener('click', async e => {
        e = e || window.event
        const target = e.target || e.srcElement

        // 判断点击的是 li 标签的类名
        if (target.tagName === 'IMG' || target.tagName === 'P' || target.tagName === 'DIV') {
          // 在跳转页面的时候, 最好把商品id 带到新的详情页面
        const id = target.dataset.id
        console.log(target.tagName);
        console.log('打印id',target.dataset.id);
          // 存储在 sessionStorage 里面
        window.sessionStorage.setItem('goods_id', id)
          // 跳转页面
        window.location.href = '../views/detail.html'
        }

        // 4-2. 判断点击的是 加入购物车 按钮
        if (target.tagName === 'BUTTON') {
          // 4-2-1. 拿到 localStorage 内部是不是有 id 和 token
          // 如果没有, 去到登录页
          const id = window.localStorage.getItem('id')
          const token = window.localStorage.getItem('token')
          console.log(target.tagName);
          console.log(id);
          console.log(token);
          // 4-2-2. 判断 id 和 token 是否存在
          if (!id || !token) {
            const result = window.confirm('您还没有登录, 点击确定跳转到登录页, 点击取消稍后在购买 !')
            // 跳转之前, 标识一下 url 信息
            window.localStorage.setItem('url', 'list')
            // console.log('没登录');
            // 跳转回到登录页
            if (result) window.location.href = '../views/login.html'
            return
          }

          // 4-2-3. 拿到当前的商品 id
          const goodsId = target.dataset.id
          console.log('goodsId',goodsId);
          // console.log(target);
          // 4-2-4. 发送请求加入购物车
          ajax({
            url: 'http://localhost:8888/cart/add',
            token,
            data: `id=${id}&goodsId=${goodsId}`,
            method: 'post',
            dataType: 'json',
            success:res => {
              if (res.code === 1) window.alert('加入购物车成功了')
            }

          })

          // console.log(res);
          // 4-2-4. 提示用户

          // 4-2-5. 加入不成功的时候, 提示用户
        }


})